﻿<!DOCTYPE html>
<html ng-app="directiveApp">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script type="text/ng-template" id="scopeTemplate">
        <div class="panel-body">
            <!-- directive模板中可以使用directive定义中scope部分指定的变量名称 -->
            <p>Name: {{local}}, City: {{cityFn()}}</p>
            <p><input ng-model="local" /></p>
        </div>
    </script>
    <script type="text/javascript">
        angular.module("directiveApp", [])
            .directive("scopeDemo", function () {
                return {
                    template: function () {
                        return angular.element(
                        document.querySelector("#scopeTemplate")).html();
                    },
                    scope: {
                        local: "=nameprop",    // =表示双向绑定；如果只希望单向绑定，则使用@符号
                        cityFn: "&city"         // &表示绑定到函数
                    }
                }
            })
            .controller("scopeCtrl", function ($scope) {
                $scope.data = {
                    name: "Adam",
                    defaultCity: "London"
                };
                $scope.getCity = function (name) {
                    return name == "Adam" ? $scope.data.defaultCity : "Unknown";
                }
            });
    </script>
</head>
<body>
    <div class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-body">
            Direct Binding: <input ng-model="data.name" />
        </div>
        <!--
            city属性连接到directive中scope定义部分的"&city"
            nameprop属性连接到directive中scope定义部分的"=nameprop"
        -->
        <div class="panel-body" scope-demo city="getCity(data.name)" nameprop="data.name"></div>
    </div>
</body>
</html>
